Seb Blog

Add Lightbox zoom on the Flickr AJAX Rails tutorial

written by seb on June 11th, 2006 @ 09:25 AM

I’m gonna write the few things to do for adding a nice Lightbox zoom to the Flickr AJAX Rails tutorial.

So let’s go on.

First things to do, creating the following application:

Once this is done let’s download Lightbox 2

Now, unzip and copy the following files in the following location:

css/lightbox.css -> public/stylesheets/

js/lightbox.js -> public/javascripts/

images/ (all except image-1.jpg and thumb-1.jpg) -> public/images/

Now let’s change few things in the code:

First adding the lightbox.js and lightbox.css in the application.

File: app/views/layout/application.rhtml


    <%= javascript_include_tag :defaults %>
    <%= stylesheet_link_tag 'flickr' %>

should be change as:


    <%= javascript_include_tag :defaults, 'lightbox' %>
    <%= stylesheet_link_tag 'flickr', 'lightbox' %>

Now let’s make a link on each images.

File: app/views/flickr/_photo.rhtml


<img class="photo" src="<%= photo.sizes[0]['source'] %>" />

should be change as:


<a href="<%= photo.sizes[4]['source'] %>" rel="lightbox"><img class="photo" src="<%= photo.sizes[0]['source'] %>" /></a>

Now it’s important to don’t forget to re-initialize the Lightbox, so let’s do it.

File: app/views/flickr/index.rhtml


:complete => visual_effect(:blind_down, 'photos'),

should be change as:


:complete => visual_effect(:blind_down, 'photos') + %(myLightbox = new Lightbox()),

and that’s should be done. :-)

Any correction ? question ? tip ? Just post a comment ;-)